<template>
  <div class="tlfz-up-wrap">
    <!-- 采集营业执照   -->
    <div class="tlfz-up-company" v-if="hasRegnum == 0">
      <div class="tlfz-up-title">
        <span class="colorRed">*</span>
        <span>上传营业执照</span>
      </div>
      <UploadImg ref="uploadImgCardPhoto" class="file_img" :isUploadSfz="true" :previewSize="true" :sfzBg="tlfzFormData.regnum_pic ? tlfzFormData.regnum_pic : regnum_pic_url" :maxLength="1" @changeImgList="uploadImgCardPhoto" :isChangeStyle="true"></UploadImg>
      <p class="tip-text" v-if="regnum_pic_txt">{{ regnum_pic_txt }}</p>
    </div>
    <!--  采集身份证  -->
    <div class="tlfz-up-card" v-if="hasIdcard == 0">
      <div class="tlfz-up-title">
        <span class="colorRed">*</span>
        <span>上传身份证正反面</span>
      </div>
      <div  style="float:left">
        <UploadImg ref="uploadImgChildA" class="file_img" :isUploadSfz="true" :previewSize="true" :sfzBg="tlfzFormData.idcard_face_pic ? tlfzFormData.idcard_face_pic : idcard_face_pic_url" :maxLength="1" @changeImgList="uploadImgCardA" :isChangeStyle="true"></UploadImg>
        <p class="tip-text" v-if="idcard_face_pic_txt">{{ idcard_face_pic_txt }}</p>
      </div>
      <div  style="float:left">
        <UploadImg ref="uploadImgChildB" class="file_img" style="float:left" :isUploadSfz="true" :previewSize="true" :sfzBg="tlfzFormData.idcard_back_pic ? tlfzFormData.idcard_back_pic : idcard_back_pic_url" :maxLength="1" @changeImgList="uploadImgCardB" :isChangeStyle="true"></UploadImg>
        <p class="tip-text" v-if="idcard_back_pic_txt">{{ idcard_back_pic_txt }}</p>
      </div>
      
    </div>

    <!--  提交按钮  -->
    <div class="tlfz-up-btn">
      <div class="btn-push red-gra-btn" @click="handleSubmitBind">立即绑定</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Uploader
} from 'vant'
Vue.use(Uploader)
import { tongLianIdCardCollect } from '@/api/user/member/memberApi'
import {
  uploadImgs
} from '@/api/community/article'
import UploadImg from '@/components/SmallUploadImg/index.vue'

export default {
  name: 'index',
  data() {
    return {
      tlfzFormData: {
        regnum_pic: '',
        idcard_face_pic: '',
        idcard_back_pic: ''
      },
      regnum_pic_url: 'https://img.wifenxiao.com/h5-wfx/images/tlfz/tlfz_yyzz.png',
      idcard_face_pic_url: 'https://img.wifenxiao.com/h5-wfx/images/tlfz/tlfz_card1.png',
      idcard_back_pic_url: 'https://img.wifenxiao.com/h5-wfx/images/tlfz/tlfz_card2.png',
      regnum_pic_txt: '',
      idcard_face_pic_txt: '',
      idcard_back_pic_txt: '',
      hasRegnum: '',
      hasIdcard: ''
    }
  },
  components: {
    UploadImg
  },
  created() {
    this.hasRegnum = this.$route.query.comUp
    this.hasIdcard = this.$route.query.idCard
  },
  methods: {
    uploadImgCardPhoto(val) {
      if (val.length > 0) {
        this.tlfzFormData.regnum_pic = val[0]
        this.regnum_pic_txt = '营业执照上传成功'
      } else {
        this.regnum_pic_txt = ''
      }
    },
    uploadImgCardA(val) {
      if (val.length > 0) {
        this.tlfzFormData.idcard_face_pic = val[0]
        this.idcard_face_pic_txt = '身份证正面上传成功'
      } else {
        this.idcard_face_pic_txt = ''
      }
    },
    uploadImgCardB(val) {
      if (val.length > 0) {
        this.tlfzFormData.idcard_back_pic = val[0]
        this.idcard_back_pic_txt = '身份证反面上传成功'
      } else {
        this.idcard_back_pic_txt = ''
      }
    },

    // 立即绑定
    handleSubmitBind() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      tongLianIdCardCollect(this.tlfzFormData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (res.data.regnum_res == 0) {
            this.$Error('请重新上传营业执照!')
            return false
          }
          if (res.data.idcard_res == 0) {
            this.$Error('请重新上传身份证!')
            return false
          }

          if (res.data.company_sign_contract_url) {
            setTimeout(() => {
              window.location.href = res.data.company_sign_contract_url
            }, 1500)
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .tlfz-up-wrap {
    padding: 20px 40px;
    background: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    .tlfz-up-title {
      font-size: 28px;
      font-weight: 500;
      padding: 24px 0 32px;
    }

    .file_img {
      width: 208px;
      height: 208px;
      margin-right: 36px;

    }

    .tip-text {
      color: #FF3838;
      font-weight: 400;
      margin-top: 10px;
    }

    .tlfz-up-company {
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 74px;
    }

    .tlfz-up-btn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 100px;
      background: #fff;
      padding: 12px 26px;
      .btn-push {
        height: 92px;
        line-height: 92px;
        text-align: center;
        font-size: 32px;
        border-radius: 46px;
      }
    }
  }
</style>
